<template>
  <ContentContainer name="授权信息" :pagination="false" :loading="loading">
    <template #header-prefix>
      <div class="flex justify-between">
        <span class="title">授权信息</span>
        <span
          class="flex-center gap-x-6px text-#ED3C3C cursor-pointer"
          @click="handleCommand('delete', [id])">
          <i-icons-delete />
          删除授权
        </span>
      </div>
    </template>
    <a-descriptions
      :column="3"
      layout="inline-vertical"
      :label-style="{
        color: '#8F959E'
      }"
      table-layout="fixed">
      <a-descriptions-item
        v-for="item of fields"
        :key="item.key"
        :label="item.label"
        :span="item.span ?? 1">
        <edit-field
          v-if="item.key === 'expired_at'"
          type="date"
          edit-title="编辑到期时间"
          label="到期时间"
          mouse-over
          hover-table
          placeholder="请选择到期时间"
          field="expired_at"
          :no-verification="false"
          rule-message="请选择到期时间"
          :max-length="20"
          :required="false"
          :fn="updateAdminApiLicenseApi"
          :refresh-fn="request"
          :content="item.value"
          content-type="date"
          :content-class="getExpirationColor(item.value as string)"
          :params="{
            id
          }"
          :default-value="String(item.value)">
        </edit-field>
        <span v-else-if="item.key === 'created_at'">
          <text-ell :content="formatUnix(item.value)" />
        </span>
        <span
          v-else-if="item.key === 'bind_status'"
          :class="{ 'text-#8F959E': item.value === 2 }">
          {{ getOptionLabel(item.value, bindStatusOptions) }}
        </span>
        <span v-else-if="item.key === 'status'">
          <a-switch
            :model-value="item.value"
            :checked-value="1"
            :unchecked-value="2"
            size="small"
            :before-change="(val) => handleBeforeChange(data, val as 1 | 2)" />
        </span>
        <edit-field
          v-else-if="item.key === 'remark'"
          type="input"
          edit-title="编辑备注"
          label="备注"
          mouse-over
          hover-table
          placeholder="请输入备注"
          field="remark"
          :no-verification="true"
          :max-length="20"
          :required="false"
          :fn="updateAdminApiLicenseApi"
          :refresh-fn="request"
          :content="item.value"
          :params="{
            id
          }"
          :default-value="item.value === '-' ? '' : item.value">
        </edit-field>
        <div
          v-else-if="item.key === 'device_fingerprint'"
          class="flex items-center gap-x-6px operation-content w-fit">
          <text-ell :content="item.value" />
          <a-tooltip content="解绑">
            <i-icons-unbind
              v-if="item.value && item.value !== '-'"
              class="operation-icon"
              @click="handleCommand('unbind', [id])" />
          </a-tooltip>
        </div>
        <text-ell v-else :content="item.value" />
      </a-descriptions-item>
    </a-descriptions>
  </ContentContainer>
</template>
<script lang="ts" setup>
import {
  getAdminApiLicenseDetailApi,
  updateAdminApiLicenseApi
} from '@/apis/modules/authBind'
import { getExpirationColor } from '../../utils'
import useCommand from '../actions'
import useTableColumn from './column'
const { fields } = useTableColumn()
const loading = ref(false)
const route = useRoute()
const id = computed(() => route.params.id as string)

const { data, request } = useRequest(getAdminApiLicenseDetailApi, {
  auto: true,
  params: { id: id.value },
  success(res: any) {
    fields.value = fields.value.map((item) => {
      if (typeof res[item.key] === 'number')
        return { ...item, value: res[item.key] }
      return { ...item, value: emptyText(res[item.key]) }
    })
  }
})
const { handleCommand } = useCommand(request)
const handleBeforeChange = (row: any, status: 1 | 2) => {
  return new Promise((resolve) => {
    const fn = () => {
      return updateAdminApiLicenseApi({ id: row.id!, status }).then(() => {
        request()
        resolve(true)
      })
    }
    if (status === 2) {
      CloudModal.error(
        {
          maskClosable: false,
          content: '停用授权，确认继续？'
        },
        fn,
        () => resolve(false)
      )
    } else {
      fn()
    }
  })
}
</script>

<style lang="less" scoped>
:deep(.arco-descriptions-row) {
  &:not(.arco-descriptions-row:first-child) {
    .arco-descriptions-item {
      @apply pt-6;
    }
  }
}
</style>
